<template>
	<view class="card-box" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }">
		<template v-if="type == 'login'">
			<view class="card-top" :style="{ height: postHeight + 'px' }">
				<swiper :indicator-dots="false" :circular="true" :interval="3000" :duration="1000" :style="{ height: postHeight + 'px' }" @change="changePostSwiper">
					<swiper-item v-for="(item, index) in loginadv" :style="{ height: postHeight + 'px' }" :key="index"><view class="card-img" :style="{ backgroundImage: `url(${item})` }"></view></swiper-item>
				</swiper>
			</view>
			<view class="card-bottom post">
				<view class="post-bottom-dot"><view class="post-bottom-dot-item" :class="{ current: postSwiperCurrent == index }" v-for="(item, index) in loginadv"></view></view>
				<view class="post-bottom-desc">带你找到命中注定的那个人</view>
				<view class="post-bottom-desc">Take you to the man you were meant to be</view>
				<view class="post-bottom-btn" @tap.stop="toLogin">前 往 登 录</view>
			</view>
		</template>
		<template v-else>
			<block v-if="card.isVip">
				<image class="card-border card-border-top" :class="{ show: index <= 0 }" src="@/static/images/card/cart-vip-top-right.png" mode="aspectFill"></image>
				<image class="card-border card-border-bottom" :class="{ show: index <= 0 }" src="@/static/images/card/cart-vip-bottom-left.png" mode="aspectFill"></image>
			</block>
			<view class="card-top" :style="{ height: photoHeight + 'px' }">
				<!-- <image class="img" :src="src" mode="aspectFill"></image> -->
				<view class="card-img" :style="{ backgroundImage: `url(${card.avatar})` }"></view>
				<template v-if="index == 0">
					<view class="card-guide" style="left: 34rpx;" :animation="loveAnimation">
						<view class="card-guide-love"><view class="suifont sui-xihuanwode"></view></view>
						<view class="card-guide-text">右滑喜欢</view>
					</view>
					<view class="card-guide" style="right: 34rpx;" :animation="loatheAnimation">
						<view class="card-guide-loathe"><view class="suifont sui-shouye3"></view></view>
						<view class="card-guide-text">左滑无感</view>
					</view>
				</template>
			</view>

			<view class="card-bottom">
				<view class="card-follow" :class="{ follow: isFollow == 1 }" @tap.stop="tapFollowToUser">
					<template v-if="isFollow == 1">
						<view class="card-follow-icon"><text class="suifont sui-yiguanzhu"></text></view>
						<view class="card-follow-text">已关注</view>
					</template>
					<template v-else>
						<view class="card-follow-icon"><text class="suifont sui-guanzhu"></text></view>
						<view class="card-follow-text">关注</view>
					</template>
				</view>
				<view class="card-main">
					<view class="card-name">{{ card.nickName }}</view>
					<view class="card-tag"><sex-age-symbol :isMine="false" :sex="card.sex" :age="card.age"></sex-age-symbol></view>
					<view class="card-score" v-if="card.score > 0">{{ card.score }}</view>
				</view>
				<view class="card-address">
					<view class="card-address-item distance">{{ card.distance }}</view>
					<view class="card-address-item" v-if="!card.district">{{ card.province }}</view>
					<view class="card-address-item">{{ card.city }}</view>
					<view class="card-address-item" v-if="card.district">{{ card.district }}</view>
				</view>
				<view class="card-info">
					<view class="card-info-item" v-for="(item, index) in card.label" :key="index">{{ item }}</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
import { mapState } from 'vuex';
export default {
	components: { sexAgeSymbol },
	props: {
		card: {
			type: Object,
			default() {
				return {};
			}
		},
		index: {
			type: Number,
			default: 99
		},
		type: {
			type: String,
			default: 'card'
		}
	},
	data() {
		return {
			loveAnimation: {},
			loatheAnimation: {},
			loveAni: null,
			loatheAni: null,
			cardWidth: null,
			cardHeight: null,
			postHeight: null,
			photoHeight: null,
			isFollow: null,
			postSwiperCurrent: 0
		};
	},
	created() {
		this.initCardSize();
		// #ifdef H5
		uni.onWindowResize(res => {
			setTimeout(() => {
				this.initCardSize();
			}, 300);
		});
		// #endif
	},
	beforeDestroy() {
		//touch移动喜欢动画
	},

	mounted() {
		//touch移动喜欢动画
		this.loveAni = uni.createAnimation({
			duration: 0
		});
		//touch移动不喜欢动画
		this.loatheAni = uni.createAnimation({
			duration: 0
		});
	},
	computed: {
		...mapState({
			loginadv: state => state.cache.loginadv
		})
	},
	methods: {
		initCardSize() {
			const systemInfo = uni.getSystemInfoSync();
			this.cardWidth = systemInfo.windowWidth - uni.upx2px(50);
			this.cardHeight = systemInfo.windowHeight - uni.upx2px(70) - 44 - systemInfo.statusBarHeight;
			this.photoHeight = this.cardHeight - uni.upx2px(200);
			this.postHeight = this.cardHeight - uni.upx2px(324);
		},
		clearAnimation() {
			this.loveAnimation = this.loveAni.export();
			this.loatheAnimation = this.loatheAni.export();
		},
		changePostSwiper(e) {
			this.postSwiperCurrent = e.detail.current;
		},
		reset() {
			//touch移动喜欢动画
			this.loveAni = uni.createAnimation({
				duration: 200
			});
			//touch移动不喜欢动画
			this.loatheAni = uni.createAnimation({
				duration: 200
			});
			this.loveAni.opacity(0).step();
			this.loveAnimation = this.loveAni.export();
			this.loatheAni.opacity(0).step();
			this.loatheAnimation = this.loatheAni.export();
		},
		moveRight(ratio) {
			this.loveAni.opacity(0.3 + 0.7 * ratio).step();
			this.loveAnimation = this.loveAni.export();
			this.loatheAni.opacity(0).step();
			this.loatheAnimation = this.loatheAni.export();
		},
		moveLeft(ratio) {
			this.loveAni.opacity(0).step();
			this.loveAnimation = this.loveAni.export();
			this.loatheAni.opacity(0.3 + 0.7 * ratio).step();
			this.loatheAnimation = this.loatheAni.export();
		},
		moveCenter() {
			this.loveAni.opacity(0.3).step();
			this.loveAnimation = this.loveAni.export();
			this.loatheAni.opacity(0.3).step();
			this.loatheAnimation = this.loatheAni.export();
		},
		tapFollowToUser() {
			this.$u.api.doHehaviorToSex(this.card.userId, 10).then(res => {
				const result = res.data.return;
				result.forEach(item => {
					if (item.to_user == this.card.userId) {
						this.isFollow = item.res;
					}
				});
			});
		},
		toUserDetail() {
			// this.visitUserZone(this.card.userId, 'slide-in-bottom');
			this.$u.debounce(this.navigationToUserDetail, 1000);
		},
		navigationToUserDetail() {
			this.navigateTo({ url: '/pageUser/zone/member?user_id=' + this.card.userId, animationType: 'slide-in-bottom' });
		}
	},
	watch: {
		'card.isFollow': {
			handler(newValue) {
				this.isFollow = newValue;
			},
			immediate: true
		}
	}
};
</script>

<style lang="scss" scoped>
.card-box {
	position: relative;
	width: 100%;
	left: 0;
	height: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	border: 1rpx solid #e9e7ef;
	.card-top {
		height: 700rpx;
		position: relative;
		.card-img {
			width: 100%;
			height: 100%;
			position: absolute;
			background-position: center;
			background-size: cover;
			z-index: 1;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
		}

		.card-guide {
			position: absolute;
			height: 117rpx;
			bottom: 15rpx;
			border-radius: 50%;
			color: #ffffff;
			z-index: 999;
			opacity: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			z-index: 12;
			.card-guide-love,
			.card-guide-loathe {
				width: 78rpx;
				height: 78rpx;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 78rpx;
				.suifont {
					font-size: 48rpx;
				}
			}
			.card-guide-love {
				background: rgba(248, 89, 98, 1);
			}
			.card-guide-loathe {
				background: rgba(204, 204, 204, 1);
			}
			.card-guide-text {
				height: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 19rpx;
				padding: 0 14rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				letter-spacing: 2rpx;
			}
			&.slide-love {
				left: 40rpx;
				background-color: #ea2a36;
			}
			&.slide-loathe {
				right: 40rpx;
				background-color: #a09e9f;
			}
			.suifont {
				font-size: 60rpx;
			}
		}
	}
	.card-bottom {
		position: relative;
		display: flex;
		padding: 0 160rpx 0 53rpx;
		flex-direction: column;
		background-color: #fff;
		height: 192rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		&.post {
			height: 324rpx;
			padding: 0;
			align-items: center;
			.post-bottom-dot {
				padding-top: 29rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				.post-bottom-dot-item {
					width: 15rpx;
					height: 15rpx;
					background: rgba(221, 221, 221, 1);
					border-radius: 15rpx;
					margin: 0 10rpx;
					&.current {
						background: rgba(151, 151, 151, 1);
					}
				}
			}
			.post-bottom-desc {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				line-height: 33rpx;
				padding-left: 2rpx;
				letter-spacing: 2rpx;
				margin-bottom: 33rpx;
			}
			.post-bottom-btn {
				width: 520rpx;
				height: 80rpx;
				background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
				border-radius: 80rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.card-follow {
			position: absolute;
			top: 8rpx;
			bottom: 0;
			width: 110rpx;
			display: flex;
			right: 38rpx;
			z-index: 12;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&.follow {
				.card-follow-icon {
					background: none !important;
				}
				.suifont {
					background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
					-webkit-background-clip: text;
					color: transparent;
					font-size: 70rpx !important;
				}
			}
			.card-follow-icon {
				width: 110rpx;
				height: 110rpx;
				background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
				border-radius: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				.suifont {
					font-size: 60rpx;
				}
			}
			.card-follow-text {
				height: 33rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(248, 89, 98, 1);
				line-height: 33rpx;
				letter-spacing: 2rpx;
				margin-top: 6rpx;
			}
		}
		.card-main {
			margin-top: 27rpx;
			height: 45rpx;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			.card-name {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				letter-spacing: 3rpx;
			}
			.card-tag {
				margin-left: 11rpx;
				display: flex;
				align-items: flex-end;

				.card-tag-sex {
					height: 20rpx;
					width: 20rpx;
				}
				.card-tag-age {
					width: 20rpx;
					font-size: 18rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 24rpx;
					height: 20rpx;
				}
			}
			.card-score {
				font-size: 30rpx;
				font-weight: 700;
				color: $theme-main-color;
				&::before {
					content: '匹配度:';
					font-size: 22rpx;
					margin-left: 20rpx;
					font-weight: 400;
					opacity: 0.8;
					padding-right: 6rpx;
				}
				&::after {
					content: '%';
					font-size: 20rpx;
					padding-left: 2rpx;
				}
			}
		}

		.card-address {
			margin-top: 12rpx;
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(151, 151, 151, 1);
			display: flex;
			align-items: flex-end;
			.card-address-item {
				font-size: 28rpx;
				letter-spacing: 3rpx;
				margin-left: 10rpx;
				&:nth-child(1) {
					margin-left: 0;
				}
				&.distance {
					font-size: 30rpx;

					&::after {
						font-size: 26rpx;
						content: 'km';
					}
				}
			}
		}
		.card-info {
			margin-top: 10rpx;
			display: flex;
			height: 28rpx;
			flex-wrap: wrap;
			overflow: hidden;
			.card-info-item {
				margin-left: 10rpx;
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				line-height: 28rpx;
				letter-spacing: 2rpx;
				&:nth-child(1) {
					margin-left: 0;
				}
			}
		}
	}
}
.card-border {
	position: absolute;
	z-index: 10;
	opacity: 0;
	transition: opacity 0.3s ease-in;
	&.show {
		opacity: 1;
	}
	&.card-border-top {
		width: 673rpx;
		height: 296rpx;
		top: -34rpx;
		right: -24rpx;
	}
	&.card-border-bottom {
		width: 600rpx;
		height: 252rpx;
		bottom: -2rpx;
		left: -2rpx;
	}
}
</style>
